<template>
  <el-header>
      <img src="~assets/img/music/logo.png" alt="" class="logo">
      <span>网易云音乐</span>

      <!--头部搜索区域-->
      <el-input placeholder="搜索单曲,歌手,视频,歌单"  @keyup.enter.native="toSearchPage" size="mini" suffix-icon="el-icon-search">
          <el-button slot="suffix" class="searchBtn" size="mini"></el-button>
      </el-input>

      <!--右侧登录区域-->
      <div class="rightContainer" style="display: flex">
          <img v-if="currentUserInfo === null" src="~assets/img/music/userIcon.png" class="userIcon">
          <img v-else :src="currentUserInfo.avatarUrl" class="userIcon">

          <span v-if="currentUserInfo === null" style="cursor:pointer;">
              未登录
          </span>

          <span v-else>
              {{currentUserInfo.nickname}}
          </span>
          <el-button type="danger" v-if="currentUserInfo !== null" size="mini"
                      style="height: 50%;margin-top: 10px;margin-left: 5px;">
              退出
          </el-button>
      </div>
    </el-header>
</template>

<script>
export default {
  name: "HeaderTabBar",
  data(){
    return {
      //当前用户的用户信息
      currentUserInfo: window.localStorage.getItem('currentUserInfo') === 'null' ? null : JSON.parse(window.localStorage.getItem('currentUserInfo')),
    }
  },
}
</script>
<style lang="less" scoped>
.el-header {
  background: rgb(236, 65, 65);
  height: 50px;
  display: flex;

  .logo {
    width: 25px;
    height: 25px;
    margin: 15px 10px;
    border-radius: 100px;
  }

  span {
    font-size: 20px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-weight: 500;
    margin-top: 15px;
    color: white;
  }

  .el-input {
    width: 275px;
  }
  
  /deep/ .el-input__inner {
    opacity: 0.4;
    margin-top: 15px;
    margin-left: 50px;
    width: 225px;
    height: 25px;
    border-radius: 12px;
  }
  
  .searchBtn {
    opacity: 0;
    position: absolute;
    float: right;
    width: 1px;
    height: 24px;
    left: -3px;
    margin-top: 15px !important;
    border-radius: 60%;
  }
}
.rightContainer {
  margin-left: auto;

  span {
      font-size: 17px;
      color: white;
  }

  .userIcon {
      width: 30px;
      height: 30px;
      border-radius: 60%;
      margin-top: 15px;
      margin-right: 10px;
  }
}
</style>